<template>
  <div class="List">
    <el-card>
      <el-form :inline="true" :model="ruleForm" ref="ruleForm" class="demo-form-inline">
        <el-col :span="8">
          <el-form-item class="el-form-item-one" label="店铺编号/名称" prop="shopIDName">
            <el-input v-model="ruleForm.shopIDName" style="width: 150px" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="行业" prop="industry">
            <el-select style="width: 120px" v-model="ruleForm.industry">
              <el-option label="便利" value="便利" />
              <el-option label="商超" value="商超" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" @click="inquireForm('ruleForm')">查询</el-button>
            <el-button type="primary" @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-card>
    <el-row :gutter="10">
      <el-col :span="8">
        <div class="grid-content">
          <span>店铺数量：{{ this.tableData.length }}</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content">
          <span>共享店铺数量：2</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content">
          <span>销售总额：10000元</span>
        </div>
      </el-col>
    </el-row>
    <el-card>
      <el-table
        :data="tables"
        style="width: 100%"
        :default-sort = "{prop: 'shopID'}"
        >
        <el-table-column
          prop="shopID"
          label="店铺编号"
          width="78">
        </el-table-column>
        <el-table-column
          prop="name"
          label="店铺名称"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="industry"
          label="店铺行业"
          width="76">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话"
          width="102">
        </el-table-column>
        <el-table-column
          prop="promoterId"
          label="推广人ID"
          width="78">
        </el-table-column>
        <el-table-column
          prop="equityRank"
          label="权益级别"
          width="76">
        </el-table-column>
        <el-table-column
          prop="equityDay"
          label="权益时限"
          width="76">
        </el-table-column>
        <el-table-column
          prop="sale"
          label="销售额"
          width="86"
          sortable>
        </el-table-column>
        <el-table-column
          prop="operationState"
          label="运营状态"
          width="76">
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          width="48">
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          width="76"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="operate"
          label="操作"
          width="350">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="$router.push('/shopBasicInformation')">详情</el-button>
            <el-button type="text" size="small" @click="$router.push('/Management-industry')">查看商品</el-button>
            <el-button type="text" size="small" @click="$router.push('/businessAnalysis')">经营分析</el-button>
            <el-button type="text" size="small" @click="onStartUsing(scope.$index, tableData)">{{ changeUsing }}</el-button>
            <el-button type="text" size="small" @click.native.prevent="onDelete(scope.$index, tableData)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      state: '',
      ruleForm: {
        shopIDName: '',
        industry: ''
      },
      tableData: [{
        shopID: '1',
        name: '保利店',
        industry: '商超',
        address: '岳麓区·保利林语茶颜悦色',
        phone: '188xxxxxxxx',
        promoterId: '1254855',
        equityRank: '未购买',
        equityDay: '',
        sale: '2000元',
        operationState: '独立经营',
        state: '停用',
        remark: '',
        operate: ''
      }, {
        shopID: '2',
        name: '麓谷店',
        industry: '便利',
        address: '岳麓区·保利林语茶颜悦色',
        phone: '188xxxxxxxx',
        promoterId: '1254855',
        equityRank: '一级权益',
        equityDay: 'xxx天',
        sale: '2000元',
        operationState: '独立经营',
        state: '停用',
        remark: '停用原因',
        operate: ''
      }, {
        shopID: '3',
        name: '湘江店',
        industry: '商超',
        address: '岳麓区·保利林语茶颜悦色',
        phone: '188xxxxxxxx',
        promoterId: '1254855',
        equityRank: '一级权益',
        equityDay: 'xxx天',
        sale: '2000元',
        operationState: '独立经营',
        state: '启用',
        remark: '',
        operate: ''
      }, {
        shopID: '4',
        name: '万科店',
        industry: '商超',
        address: '岳麓区·保利林语茶颜悦色',
        phone: '188xxxxxxxx',
        promoterId: '1254855',
        equityRank: '一级权益',
        equityDay: 'xxx天',
        sale: '2000元',
        operationState: '共享经营',
        state: '启用',
        remark: '',
        operate: ''
      }, {
        shopID: '5',
        name: '五一店',
        industry: '便利',
        address: '岳麓区·保利林语茶颜悦色',
        phone: '188xxxxxxxx',
        promoterId: '1254855',
        equityRank: '一级权益',
        equityDay: 'xxx天',
        sale: '2000元',
        operationState: '共享经营',
        state: '启用',
        remark: '',
        operate: ''
      }]
    }
  },
  computed: {
    changeUsing () {
      return this.tableData.state ? '停用' : '启用'
    },
    tables () {
      const input = this.ruleForm.shopIDName
      if (input) {
        return this.tableData.filter(data => {
          return Object.keys(data).some(key => {
            return String(data[key]).toLowerCase().indexOf(input) > -1
          })
        })
      }
      return this.tableData
    }
  },
  watch: {},
  created () {},
  mounted () {},
  methods: {
    inquireForm () {
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    onDelete (index, rows) {
      rows.splice(index, 1)
    },
    onStartUsing (index, rows) {
      if (rows[index].state === '启用') {
        this.tableData.state = true
        rows[index].state = '停用'
      } else if (rows[index].state === '停用') {
        this.tableData.state = false
        rows[index].state = '启用'
      }
      if (this.tableData.state === '启用') {
        rows[index].state = '停用'
      } else if (this.tableData.state === '停用') {
        rows[index].state = '启用'
      }
    }
  }
}
</script>

<style scoped>
::v-deep .el-card {
  width: 100%;
  margin-top: 0;
}
.el-form-item-one {
  margin-left: 20px;
}
.el-button {
  margin-top: 0;
  margin-right: 20px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.bg-purple {
  background: #d3dce6;
}
.el-row {
  margin-top: 20px;
  margin-bottom: 10px;
  padding-left: 30px;
}
</style>
